I wrote the following function that receives headers, values and a fileName as params:

export function generateAndDownloadCsv(headers: string[], values: string[][], fileName: string) {
  let body = headers.join(',') + '\n';

  for (const row of values) {
    body += row.join(',') + '\n';
  }

  const csvFile = new Blob([body], {type: 'text/csv'});
  const a = document.createElement('a');
  a.download = fileName;
  a.href = window.URL.createObjectURL(csvFile);
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

Everything works fine, downloads the CSV file in local environment. However, when deploying to our test environment which is using cloudfront that fetches the frontend from S3.

When downloading it on test environment, I get redirected to https://url.com/[object%20Object] and I see the following page:

The generated blob URL looks like: blob:https://my-site-dot-com/f93c0768-2e57-424f-85fc-0ad5417f6f12

Is this a code related issue or host issue, has anyone ever faced something like this?

I think it something that has to do with the cloudfront, with the URL.

Thank you!